
<template>
	<view class="my-tab">
		<view class="order-tabbar">
			<u-tabs-swiper bg-color="#F5F5F5" ref="uTabs" :list="list" :current="current" @change="tabsChange"
				:is-scroll="true" swiperWidth="750"></u-tabs-swiper>
		</view>
		<swiper  class="order-swiper" :current="swiperCurrent" @change="swiperChange" @transition="transition"
			@animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<view class="swiper-item-panel plan" style="height: 100%; width: 100%;">
					<view class="plan-code">
						实验名称：{{planMsg.purpose || ''}}
					</view>
					<!-- <view class="plan-code">
						实验菜园：{{planMsg.model || ''}}
					</view> -->
					<view class="plan-code">
						实验准备：{{planMsg.prepare || ''}}
					</view>
					<view class="plan-code">
						预期周期：{{planMsg.expectPeriod || ''}}天
					</view>
					<view class="plan-code">
						预期效果：{{planMsg.expectEffect || ''}}
					</view>
					<view class="plan-code">
						耕种类型：{{planMsg.variety || ''}}
					</view>

					<view class="plan-code">
						耕种型号：{{planMsg.model || ''}}
					</view>
					<view class="plan-code">
						其他说明：{{planMsg.remark || ''}}
					</view>
					<!-- <view class="plan-code">
						实验简介：{{planMsg.description || ''}}
					</view> -->
					<view class="plan-btn">
						<u-button type="primary" @click="seeVideo">实时拍摄</u-button>
						<u-button style="margin-left: 40rpx;" type="primary" @click="seeData">实验数据</u-button>
						<!-- <u-button style="margin-left: 40rpx;" type="primary" @click="seeData">实验资料</u-button> -->
					</view>
				</view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<u-time-line class="progress swiper-item-panel">
					<u-time-line-item v-for="item in prograssList" :key="item.id">
						<template v-slot:node>
							<view class="u-node" style="background: #19be6b;">
								<!-- 此处为uView的icon组件 -->
								<u-icon name="order" color="#fff" :size="24"></u-icon>
							</view>
						</template>
						<template v-slot:content>
							<view class="progress-item" @click="seeProgressItem(item.id)">
								<view class="progress-item-left">
									<image class="my-img" :src="item.mainImg" mode="aspectFit"></image>
								</view>
								<view class="progress-item-right">
									<view class="swiper-title">
										{{item.title}}
									</view>
									<view class="txt-cut-3">
										{{item.content}}
									</view>
									<!-- <view class="">
										实验时间：{{item.createdOn}}
									</view> -->
								</view>
								
							</view>
							
						</template>
					</u-time-line-item>
				</u-time-line>
			</swiper-item>
			<!-- 专家指导 -->
			<swiper-item class="swiper-item">
				<u-time-line class="progress">
					<u-time-line-item nodeTop="2" v-for="item in expertGuideList" :key="item.id">
						<template v-slot:node>
							<view class="u-node" style="background: #19be6b;">
								<!-- 此处为uView的icon组件 -->
								<u-icon name="file-text-fill" color="#fff" :size="24"></u-icon>
							</view>
						</template>
						<template v-slot:content>
							<view class="progress-item" @click="goWebview(item.herf)">
								<view class="progress-item-left">
									<image class="my-img" :src="item.preview" mode="aspectFit"></image>
								</view>
								<view class="progress-item-right">
									<view class="swiper-title">
										{{item.title}}
									</view>
									<view class="introduction txt-cut-3">
										 {{item.introduction}}
									</view>
									<view class="swiper-time">
										{{item.createdOn}}
									</view>
								</view>
								
							</view>
							
						</template>
					</u-time-line-item>
				</u-time-line>
			</swiper-item>
			<!-- 实验问题 -->
			<swiper-item class="swiper-item">
				<view class="swiper-item-panel question" style="height: 100%; width: 100%">
					<view class="question-item" v-for="qitem in questionList" @click="goQuestionDetail(qitem.id)">
						<view class="question-item-top">
							<u-avatar style="height: 60rpx;" :size="60" :src="qitem.avatar"></u-avatar>
							<view class="question-item-top-right">
								<view class="top-right-name">
									{{qitem.nickname}}
								</view>
								<view class="top-right-name-time">
									{{qitem.createdOn}}
								</view>
							</view>
						</view>
						<view class="question-item-bottom">
							问题标题：{{qitem.title}}
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<view class="swiper-item-panel" style="height: 100%; width: 100%">
          <block v-for="(item,i) in honorList" :key="i">
            <view class="yemianItem" @click="ToHonerDetail(item.type)">
                <image class="rongyu_icon" src="../../static/imgs/honor-icon.png" mode="heightFix"></image>
                <view class="text">{{item.type}}</view>
            </view>
          </block>
         
				</view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<view style="height: 100%; width: 100%">
					<grow-up :id="id"></grow-up>
				</view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<view class="swiper-item-panel" style="height: 100%; width: 100%">
					7
				</view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<view class="swiper-item-panel" style="height: 100%; width: 90%;">
					8
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>

	import * as that from '@/API/index.js'
  import{getHonorList}from '@/API/honor.js'
	import growUp from './grow-up.vue'

	export default {
		name: "tab",
		components:{
			growUp
		},
		data() {
			return {
				list: [{
					name: '实验计划'
				}, {
					name: '实验进展'
				}, {
					name: '专家指导'
				}, {
					name: '实验问题'
				}, {
					name: '荣誉榜'
				}, {
					name: '成长感悟'
				}, {
					name: '教学成果'
				},{
					name: '实验成果'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				id: '',
				// 实验计划
				planMsg: {
					purpose: '',
					model: '',
					purpose: '',
					prepare: '',
					expectEffect: '',
				},
				chartData: {
					categories: [],
					series: [{
						name: "空气温度",
						data: []
					}],
				},
				// 实验进展
				prograssList: [],
				// 专家指导
				expertGuideList:[],
				// 问题列表
				questionList:[],
        // 荣誉榜
        honorList: []
			};
		},
		onLoad({
			id
		}) {
			this.id = id
			this.getExperimentPlan()
			this.getExperimentProgress()
			this.getExperimentEcharts()
			this.getExpertGuide()
			this.getQuestionList()
      this.getHonorList()
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
				this.$emit("tabChange", index);
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			swiperChange(e) {
				console.log(e);
				this.$emit("tabChange", e.detail.current);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				this.$emit("onreachBottom", this.swiperCurrent);
			},
			// 获取实验计划
			getExperimentPlan() {
				that.experimentsPlan(this.id).then(res => {
					console.log(res)
					this.planMsg = res.data
				})
			},
			// 获取实验进展
			getExperimentProgress() {
				that.experimentsProgress(this.id).then(res => {
					console.log(res)
					this.prograssList = res.data.map(el =>{
						el.comment = []
						return el
					})
				})
			},
			// 获取实验图
			getExperimentEcharts(){
				that.experimentsEcharts(this.id).then(res =>{
					console.log(res)
					let temperature = res.data[0].data
					for (let i = 0; i < 30; i++) {
						this.chartData.series[0].data.push(temperature[i].data)
						this.chartData.categories.push(temperature[i].time.substr(11))
					}
					console.log(this.chartData.series)
				})
			},
			seeVideo(){
				uni.navigateTo({
					url:"../play-video/play-video?id=" + this.id
				})
			},
			seeData(){
				uni.navigateTo({
					url:"../test/test?id=" + this.id
				})
			},
			// 查看进程
			seeProgressItem(id){
				uni.navigateTo({
					url:"../progress-detail/progress-detail?id=" + id
				})
			},
			// 获取专家指导
			getExpertGuide(){
				let item = {
					page:1,
					limit:20
					
				}
				that.expertGuide(this.id,item).then(res =>{
					console.log(res)
					this.expertGuideList = res.data
				})
			},
			// 打开外链
			goWebview(herf){
				let url = 'https://baike.baidu.com/item/%E7%95%AA%E8%8C%84/69104?fr=aladdin'
				if(herf){
					url = herf
				}
				uni.navigateTo({
					url:'../webView/webView?webUrl='+ url
					// url:'../webView/webView?webUrl='+'http://localhost:8081/#/pages/index/index'
				})
			},
			// 获取实验问题
			getQuestionList(){
				let item = {
					page:1,
					limit:100
				}
				that.questionList(this.id,item).then(res =>{
					console.log(res)
					this.questionList = res.data
				})
			},
			goQuestionDetail(id){
				uni.navigateTo({
					url:'../quesetion-detail/quesetion-detail?id=' + id
				})
			},
      // 荣誉榜详情
      ToHonerDetail(type){
        uni.navigateTo({
          // url: `../honer-detail/honer-detail?id=${this.id}&type=${type}`,
          url: `../honer-detail/honer-detail?id=60fb6f486bac68402023e0ee&type=${type}`,
          success: res => {},
          fail: () => {},
          complete: () => {}
        });
      },
      // 获取荣誉榜列表
     async getHonorList(){  
       // console.log('this.id-----------------',this.id)
        const {data} = await getHonorList('60fb6f486bac68402023e0ee')
        this.honorList = data
    // console.log('*******',data)
      },
      
		},
    
    
	};
</script>

<style lang="scss">
	.my-tab {
		height: 100vh;
		display: flex;
		flex-direction: column;

		.order-tabbar {
			margin-bottom: 20rpx;
		}

		.order-swiper {
			flex: 1;
			height: 0;
			box-sizing: border-box;
			padding: $uni-spacing-10;
			.swiper-item {
				.swiper-item-panel {
					box-sizing: border-box;
					// padding: $uni-spacing-10;
					position: relative;
					width: 100%;
					height: 100%;
					overflow: auto;
				}

				.plan {
					.plan-code {
						margin-bottom: $uni-spacing-20;
						font-size: $uni-font-size-16;
					}

					.plan-btn {
						width: 40%;
						position: absolute;
						bottom: $uni-spacing-20;
						left: 50%;
						transform: translateX(-50%);
						display: flex;
						justify-content: space-around;
					}
				}
				.charts-box{
				  width: 96%;
				  margin: 0 auto;
				  height:300px;
				}
				.progress {
					.progress-item{
						display: flex;
						align-items: center;
						.progress-item-left{
							width: 160rpx;
							height: 160rpx;
							margin-right: $uni-spacing-10;
							flex-shrink: 0;
						}
					}
				}
				.introduction{
					// width: 110rpx;
					max-width: 428rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					text-overflow: -o-ellipsis-lastline;
					display: -webkit-box;
					-webkit-line-clamp: 3;
					/* 块元素显示的文本的行数 */
					line-clamp: 3;
					/* 此属性不生效 */
					-webkit-box-orient: vertical;
					/* 设置或检索伸缩盒对象的子元素的排列方式 ,盒子行数根据高度来计算 */
					overflow-wrap: break-word;
					/* 设置div换行 */
				}
				.question{
					.question-item{
						background-color: $uni-bg-color;
						margin-bottom: $uni-spacing-20;
						background: #f5f5f5;
						padding: 20rpx;
						border-radius: 10rpx;
						.question-item-top{
							display: flex;
							align-items: center;
							// border-bottom: 1px solid #ebebeb;
							.question-item-top-right{
								margin-left: 10rpx;
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								padding: 10rpx 0;
							}
							.top-right-name-time{
								font-size: 12px;
							}
						}
						.question-item-bottom{
							color: #000000;
							font-size: $uni-font-size-16;
							margin-top: $uni-spacing-10;
						}
					}
				}
			}
		}
	}
	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}
	
	.swiper-title {
		color: #000000;
		font-size: 32rpx;
	}
	.swiper-time{
		color: $uni-text-color-grey;
	}
	.u-time-axis{
		padding-left: 80rpx !important;
	}
	.u-time-axis:before{
		left: 40rpx !important;
	}
  .yemianItem{
       margin: 16rpx 0rpx 0;
       background-color: #f5f5f4;
       border-radius: 10rpx;
       width: 100%;
       height: 100rpx;
       vertical-align: middle;
    
       .rongyu_icon{
         height: 50rpx;
         margin:25rpx 0 0 45rpx ;
       }
       .text{
         display: inline-block;
          // margin-top: 25rpx;
            line-height: 50rpx;
            margin-left: 40rpx;
            height: 50rpx;
            position: relative;
            top: -12rpx;
            font-size: 32rpx;
       }
  }
</style>
